<template>
  <el-dialog
    @close="closeHandler"
    width="835px"
    :title="formData.id ? '修改咯' : '新增咯'"
    :visible.sync="dialogShow"
  >
    <el-form v-if="dialogShow" ref="form" :model.sync="formData" :rules="formRules">
      <el-row>
        <el-col :span="12">
          <el-form-item label-width="100px" label="归属学科" prop="subject_id">
            <el-select
              style="width:200px; "
              v-model="formData.subject_id"
              size="small"
              placeholder="归属学科"
            >
              <el-option
                v-for="item in treeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label-width="100px" label="目录名称" prop="directory_name">
            <el-input
              clearable
              style="width:200px; "
              v-model="formData.directory_name"
              size="small"
              placeholder="请输入目录名称"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label-width="100px" label="排序" prop="sort">
            <el-input-number
              style="width:185px"
              clearable
              size="small"
              v-model="formData.sort"
              @change="handleChange"
              :min="-18"
              :max="1000"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="100px" label="是否显示" prop="is_show">
            <el-switch
              v-model="formData.is_show"
              active-color="#13ce66"
              :active-value="1"
              :inactive-value="2"
              active-text="是"
              inactive-text="否"
            ></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label-width="100px" label="目录图标">
          <uploadImg ref="studyIcon" />
          <span>建议尺寸：120*120</span>
        </el-form-item>
      </el-row>
    </el-form>
    <el-row type="flex" justify="end">
      <el-button @click="cancel" size="small">取消</el-button>
      <el-button @click="btnOk" size="small" type="primary">确定</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { addDirectoryApi, editDirectoryApi } from '@/api/directory'
import uploadImg from '../../subject/components/uploadImg.vue'
export default {
  name: 'AddDirectory',
  //接收父组件传递过来的数据
  props: {
    treeList: {
      type: Array,
      required: true,
    },
  },
  //注册上传图片组件
  components: {
    uploadImg,
  },
  //data数据
  data() {
    return {
      dialogShow: false,
      //表单绑定、发送请求携带的数据
      formData: {
        directory_icon: '',
        directory_name: '',
        is_show: '',
        sort: 10,
        subject_id: '',
      },
      //校验表单规则
      formRules: {
        subject_id: { required: true },
        directory_name: { required: true, message: '请输入', trigger: 'blur' },
        sort: { required: true },
        is_show: { required: true },
      },
    }
  },
  //监听formData 如果有id 那就是点击的修改
  watch: {
    formData: {
      handler(newVal, oldVal) {
        if (newVal.id) {
          //才执行图片回显
          this.editPhoto()
        }
      },
    },
  },

  methods: {
    // 排序
    handleChange(value) {
      this.formData.sort = value
    },
    //取消
    cancel() {
      ;(this.formData = {
        directory_icon: '',
        directory_name: '',
        is_show: '',
        sort: 1,
        subject_id: '',
      }),
        (this.dialogShow = false)
    },
    closeHandler() {
      ;(this.formData = {
        directory_icon: '',
        directory_name: '',
        is_show: '',
        sort: 1,
        subject_id: '',
      }),
        (this.dialogShow = false)
    },
    async btnOk() {
      //try{} catch(){}语句
      try {
        //如果formData.id存在 那就是修改 调用修改接口
        if (this.formData.id) {
          //删除formData里不需要携带的属性
          delete this.formData.subject_name
          delete this.formData.username
          //formData内的图片地址等于上传组件fileList[0].url
          this.formData.directory_icon = this.$refs.studyIcon.fileList[0].url
          await this.$refs.form.validate()
          await editDirectoryApi(this.formData)
          this.$message.success('修改成功啦!(#^.^#)')
        } else {
          //新增
          this.formData.directory_icon = this.$refs.studyIcon.fileList[0].url
          await this.$refs.form.validate()
          await addDirectoryApi(this.formData)
          this.$message.success('新增成功啦!(#^.^#)')
        }
        this.dialogShow = false
        //通知父组件更新列表
        this.$emit('updateList')
      } catch (error) {
        console.log(error)
      }
    },
    //点击修改按钮 图片回显
    editPhoto() {
      this.$nextTick(() => {
        this.$refs.studyIcon.fileList = []
        //只有修改才能执行回显
        if (this.formData.id) {
          let url = this.formData.directory_icon
          this.$refs.studyIcon.fileList = []
          this.$refs.studyIcon.fileList.push({
            url: url,
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  border-bottom: 1px solid #ebebeb;
}
</style>